<!--
 * @Author: zpp
 * @Date: 2023-08-03 16:07:42
 * @LastEditors: zpp
 * @LastEditTime: 2023-08-04 11:25:57
 * @FilePath: \iking-admin-newui\src\MicroApp\views\components\details.vue
 * @Description: 详情组件
-->
<script lang="ts" setup name="formList">
// 详情类型
interface Props {
  details: Details
}
// 详情所需要的类型
interface Details {
  // Descriptions 组件自带原有的属性值
  des?: any
  // 列表数据
  list: DetailsList[]
  // 标题右边的插槽
  extraSlot?: string
  // 列表对应的数据
  data: any
}
interface DetailsList {
  // 标签文本
  label: string
  // 根据key值在data查找数据进行回显
  key?: string
  // 列的数量
  span?: number | undefined
  // 插槽名称 处理特殊情况的时候用
  slotName?: string
}
// 父组件传过来的值
withDefaults(defineProps<Props>(), {
  details: {} as any
})
</script>

<template>
  <el-descriptions v-bind="details?.des">
    <!-- 标题右边的显示 -->
    <template v-if="details?.extraSlot" #extra>
      <slot :name="details?.extraSlot"></slot>
    </template>
    <el-descriptions-item
      v-for="(ls, index) in details?.list"
      :key="`details${index}`"
      :span="ls.span || 1"
      :label="ls.label"
      label-class-name="descriptions-label"
      content-class-name="descriptions-content"
    >
      <!-- 插槽 处理特殊的 -->
      <template v-if="ls?.slotName">
        <slot :name="ls?.slotName"></slot>
      </template>
      <!-- 正常显示 -->
      <template v-else-if="ls.key">
        {{ details?.data[ls.key] }}
      </template>
    </el-descriptions-item>
  </el-descriptions>
</template>
